<template>
    <div class='login'>
      <my-header>
        <template slot="center">
           <h4>用户登录</h4>
        </template>
        <template slot="right">
           <!-- <span @click="$store.commit('cutColor')">切换主题</span> -->
           <span @click="cutColor">切换主题</span>
        </template>
      </my-header>
      <div class="content">
         <my-input label="手机号" placeholder="请输入手机号" v-model="user"></my-input>
         <my-input label="密码" type="password"  placeholder="请输入密码" v-model="pwd"></my-input>
         <button v-back="$store.state.color" @click="login">登录</button>
      </div>
    </div>
</template>

<script>
import myHeader from '../components/myHeader';
import myInput from '../components/myInput';
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
          user: '',
          pwd: ''
        };
    },
    created() {},
    methods: {
      ...mapMutations(['cutColor','saveToken']),
      login(){ // 登录的事件
        let obj = {
          user: '黄四郎',
          pwd: '88888888'
        }
        if (this.user == obj.user&&this.pwd == obj.pwd){
            this.saveToken('AAAA');
            this.$router.push('/');
        } else {
            alert('用户名或者密码错误！');
        }
      }
    },
    components:{myHeader,myInput}
};
</script>

<style lang='scss' scoped>
.login{
//   height: 100%;
}
.content{
  text-align: center;
  button{
    width: 80px;
    height: 30px;
    border: none;
    border-radius: 5px;
  }
}
</style>
